<template>
  <div class="contact">
    <div>
      <el-carousel indicator-position="none" arrow="never" height="500px">
        <el-carousel-item v-for="item in 4" :key="item">
          <div>
            <img
              style="width: 100%; height: 500px"
              :src="banner[0]?.article_cover"
              alt="Element logo"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="px-32 py-10">
      <div class="flex w-full" style="height: 390px">
        <div class="flex-1 fadeInUp animated" id="map-container"></div>
        <div
          class="flex-1 px-10 py-5 bg-amber-100 fadeInUp animated"
          style="animation-delay: 0.2s"
        >
          <p class="text-2xl relative border-b pb-4 mb-4">
            {{ znEn22[fieldA] }}
            <span class="absolute left-0 bottom-0"></span>
          </p>
          <p class="text">{{ znEn12[fieldA] }}: 15800022219</p>
          <p class="text">{{ znEn12[fieldA] }}: 13286886181</p>
          <p class="text">QQ: 595644930</p>
          <p class="text">{{ znEn13[fieldA] }}: 595644930@qq.com</p>
          <p class="text">{{ znEn14[fieldA] }}:{{ znEn15[fieldA] }}</p>
          <img
            style="display: block; width: 120px; padding-top: 10px"
            src="@i/test/weixin.jpg"
          />
        </div>
      </div>
      <div class="my-8 fadeInUp animated">
        <div class="text-center fadeInUp animated">
          <p class="text-2xl font-bold">合作留言</p>
          <p class="text-2xl" style="color: #009944">OnLine Message</p>
        </div>
        <div class="form py-8 fadeInUp animated">
          <el-form :model="form" label-width="auto" ref="ruleFormRef">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item required prop="company">
                  <el-input
                    autocomplete="off"
                    :style="{ height: '50px', fontSize: '16px' }"
                    v-model="form.company"
                    :placeholder="znEn23[fieldA]"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item v-model="form.name" required prop="name">
                  <el-input
                    autocomplete
                    :style="{ height: '50px', fontSize: '16px' }"
                    v-model="form.name"
                    :placeholder="znEn24[fieldA]"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item required prop="phone">
                  <el-input
                    autocomplete
                    :style="{ height: '50px', fontSize: '16px' }"
                    v-model="form.phone"
                    :placeholder="znEn25[fieldA]"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item required prop="notes">
                  <el-input
                    :style="{ fontSize: '16px' }"
                    v-model="form.notes"
                    :rows="4"
                    type="textarea"
                    :placeholder="znEn26[fieldA]"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="flex justify-center">
            <el-button
              @click="onSubmit(ruleFormRef)"
              size="large"
              :style="{
                height: '50px',
                color: '#fff',
                fontSize: '16px',
                width: '320px',
              }"
              color="#009944"
              >{{ znEn27[fieldA] }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, inject } from "vue";
import { User, Message } from "@element-plus/icons-vue";
import contact from "@/api/contact.js";
import shouye from "@/api/index.js";
const allfield = inject("allfield");
const { fieldA, fieldB } = allfield();
const znEn12 = ref({
  nameit: "手机",
  ext_field3: "Mobile phone",
});
const znEn13 = ref({
  nameit: "邮箱",
  ext_field3: "Email",
});
const znEn14 = ref({
  nameit: "地址",
  ext_field3: "Address:",
});
const znEn15 = ref({
  nameit: "广东省佛山市南海区桂城街道二洲村清风路亿纬电子科技有限公司",
  ext_field3:
    "Yiwei Electronic Technology Co., Ltd., Qingfeng Road, Erzhou Village, Guicheng Street, Nanhai District, Foshan City, Guangdong Province",
});
const znEn22 = ref({
  nameit: "佛山市雅锌科技有限公司",
  ext_field3: "Foshan Yazinc Technology Co., Ltd   ",
});
const znEn23 = ref({
  nameit: "公司名称",
  ext_field3: "company",
});
const znEn24 = ref({
  nameit: "阁下尊称",
  ext_field3: "name",
});
const znEn25 = ref({
  nameit: "邮箱/手机",
  ext_field3: "email/phone",
});
const znEn26 = ref({
  nameit: "备注",
  ext_field3: "note",
});
const znEn27 = ref({
  nameit: "提交",
  ext_field3: "submit",
});
const banner = ref([]);
const form = reactive({
  company: "",
  name: "",
  phone: "",
  notes: "",
});
const instanceMap = ref(null);
onMounted(() => {
  initMap();
  setMapOption();
  fetchInitializationData();
});
const fetchInitializationData = async () => {
  const res = await shouye.index();
  const { banner2 } = res;
  banner.value = banner2;
};
const setMapOption = () => {
  instanceMap.value.setCenter(["113.194909", "23.055002"]);
  let infoWindow = new AMap.InfoWindow({
    offset: new AMap.Pixel(0, -30),
    content:
      "<div style='width:200px;padding:5px'><p>广东省佛山市南海区桂城街道二洲村清风路亿纬电子科技有限公司</p></div>",
  });
  let marker = new AMap.Marker({
    position: ["113.194909", "23.055002"],
  });
  let circle = new AMap.Circle({
    center: ["113.194909", "23.055002"],
    radius: 1000, //半径
    borderWeight: 3,
    strokeColor: "#1791fc",
    strokeOpacity: 1,
    strokeWeight: 1.5,
    strokeOpacity: 1,
    fillOpacity: 0.4,
    // strokeStyle: "dashed",
    strokeDasharray: [10, 10],
    // 线样式还支持 'dashed'
    fillColor: "#1791fc",
    zIndex: 50,
  });
  infoWindow.open(instanceMap.value, instanceMap.value.getCenter());
  marker.setMap(instanceMap.value);
  circle.setMap(instanceMap.value);
  // 缩放地图到合适的视野级别
  instanceMap.value.setFitView([circle]);
};
const initMap = () => {
  instanceMap.value = new AMap.Map("map-container", {
    zoom: 14,
    resizeEnable: true,
  });
};
const ruleFormRef = ref(null);
const onSubmit = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const jionString = Object.values(form);
      const res = await contact.lyAdd({ cv: jionString.join(",") });
      ElMessage({
        type: "success",
        message: res.msg,
      });
    } else {
      ElMessage({
        type: "error",
        message: "请补齐资料",
      });
    }
  });
};
</script>

<style scoped lang="scss">
.border-b {
  border-bottom: 1px solid #eee;
}
span {
  position: absolute;
  left: 0;
  bottom: -2px;
  display: block;
  width: 40px;
  height: 3px;
  background: #009944;
  border-radius: 50px;
}
.contact {
  .form {
    background-color: #eeeeee;
  }
}
.text {
  font-size: 16px;
  line-height: 30px;
  color: #7b7b7b;
}
</style>
